<template>
  <div style="padding: 14px">
    <el-card shadow="hover" >
      <div style="display:flex;">

        <div style="display:inline-block;margin-left: 12%">
          <el-button icon="el-icon-star-on " type="primary" circle class="aaa" @click="goToQuestion()"></el-button>
          <a style="display: block;margin-left: -7px;font-size: 13px;margin-top: 2px;">回答问题</a>
        </div>

        <div style="display:inline-block;margin-left: 12%">
          <el-button icon="el-icon-tickets " type="success" circle @click="goToArticle()"></el-button>
          <a style="display: block;margin-left: -1px;font-size: 13px;margin-top: 2px">写文章</a>
        </div>

        <div style="display:inline-block;margin-left: 12%">
          <el-button icon="el-icon-s-opportunity " type="warning" circle ></el-button>
          <a style="display: block;margin-left: -1px;font-size: 13px;margin-top: 2px">看想法</a>
        </div>

      </div>
    </el-card>
    <el-card style="margin-top: 2%">
      <p style="margin-left: 20%;margin-top:-3%;font-size: 20px;font-weight: bold">本周文章发表排行<i class="el-icon-medal-1" title="优质作者"></i></p>
      <div v-for="(d,index) in userArticleList" :key="index" style="margin-top: 5px;margin-left: 8%" >
        <el-row>
          <el-col :span="3">
        <span style="font-weight: bold;font-size: 30px">{{index+1}}</span>
          </el-col>
          <el-col :span="5">
        <el-avatar shape="square" :size="40"   :src="d.headPic" style="margin-left: 3%"></el-avatar>
          </el-col>
            <el-col :span="10" style="margin-top: 3%">
          {{d.name}}
          </el-col>
          <el-col :span="6" style="margin-top: 3%">
            <span>{{d.num}} 篇</span>
          </el-col>
        </el-row>
      </div>

    </el-card>
  </div>
</template>

<script>
    export default {
        name: "SideMenu",
      data(){
        return {
          pageBean:{
            pageNum:1,
            pageSize:10,
          },
          userArticleList:[]
        }
      },
      mounted() {
        this.getUserArticleCount();
      },
      methods:{
        goToArticle()
        {
          this.$router.push({path: "/article"})
        },
        goToQuestion()
        {
          console.log(this.$route.path);
          if(this.$route.path=='/question')
          {
            this.$message({
              message:"你已经在问题页面了喔！",
              type:'warning'
            })
            return
          }
          this.$router.push({path: "/question"})
        },
        getUserArticleCount()
        {
          this.$http.post("http://localhost:8989/fornote/user/countUser",this.pageBean).then(response =>{
            this.userArticleList=response.data.data.list;
          })
        }
      }
    }
</script>

<style scoped>

</style>
